<template>
  <div>
    <el-form-item
      v-for="(item,index) in innerData"
      v-show="item.hidden?false:true"
      :key="index"
      :label="item.label+'：'"
      :rules="item.rules"
      :required="item.required"
      :style="{width:auto ? null : item.fullWidth ? '100%':'50%'}"
    >
      <el-input
        v-if="item.type=='input' && item.option.show"
        v-model="item.value"
        :type="item.option.type"
        :maxlength="item.option.maxlength"
        :minlength="item.option.minlength"
        :show-word-limit="item.option.showWordLimit"
        :clearable="item.option.clearable"
        :show-password="item.option.showPassword"
        :disabled="item.option.disabled"
        :size="item.option.size"
        :prefix-icon="item.option.prefixIcon"
        :suffix-icon="item.option.suffixIcon"
        :rows="item.option.rows"
        :autosize="item.option.autosize"
        :autocomplete="item.option.autocomplete"
        :auto-complete="item.option.autoComplete"
        :name="item.option.name"
        :readonly="item.option.readonly"
        :max="item.option.max"
        :min="item.option.min"
        :resize="item.option.resize"
        :autofocus="item.option.autofocus"
        :form="item.option.form"
        :label="item.option.label"
        :tabindex="item.option.tabindex"
        :validate-event="item.option.validateEvent"
        :placeholder="item.option.placeholder"
        @blur="(event) => {if(typeof item.event.blur == 'function') item.event.blur(event)}"
        @focus="(event) => {if(typeof item.event.focus == 'function') item.event.focus(event)}"
        @change="(value) => {if(typeof item.event.change == 'function') item.event.change(value)}"
        @input="(value) => {if(typeof item.event.input == 'function') item.event.input(value)}"
        @clear="() => {if(typeof item.event.clear == 'function') item.event.clear()}"
      /> <!-- clearable -->
      <el-select
        v-if="item.type=='select'"
        :ref="item.option.refName"
        v-model="item.value"
        :multiple="item.option.multiple"
        :disabled="item.option.disabled"
        :value-key="item.option.valueKey"
        :size="item.option.size"
        :clearable="item.option.clearable"
        :collapse-tags="item.option.collapseTags"
        :multiple-limit="item.option.multipleLimit"
        :name="item.option.name"
        :autocomplete="item.option.autocomplete"
        :auto-complete="item.option.autoComplete"
        :filterable="item.option.filterable"
        :allow-create="item.option.allowCreate"
        :filter-method="item.option.filterMethod"
        :remote="item.option.remote"
        :remote-method="item.option.remoteMethod"
        :loading="item.option.loading"
        :loading-text="item.option.loadingText"
        :no-match-text="item.option.noMatchText"
        :no-data-text="item.option.noDataText"
        :popper-class="item.option.popperClass"
        :reserve-keyword="item.option.reserveKeyword"
        :default-first-option="item.option.defaultFirstOption"
        :popper-append-to-body="item.option.popperAppendToBody"
        :automatic-dropdown="item.option.automaticDropdown"
        :placeholder="item.option.placeholder"
        @change="(value) => {if (typeof item.event.change == 'function') item.event.change(value)}"
        @visible-change="(show) => {if (typeof item.event.visibleChange == 'function') item.event.visibleChange(show)}"
        @remove-tag="(tag) => {if (typeof item.event.removeTag == 'function') item.event.removeTag(tag)}"
        @clear="() => {if (typeof item.event.clear == 'function') item.event.clear()}"
        @blur="(event) => {if (typeof item.event.blur == 'function') item.event.blur(event)}"
        @focus="(event) => {if (typeof item.event.focus == 'function') item.event.focus(event)}"
      >
        <el-option
          v-for="(option,$index2) in item.option.selectOptions"
          :key="$index2"
          :label="option.label"
          :value="option.value"
          :disabled="option.disabled"
        >
          <slot
            v-if="item.slotName"
            :name="item.slotName"
            :$index="$index2"
            :row="option"
          />
        </el-option>
      </el-select>
      <el-date-picker
        v-if="item.type=='date'"
        :ref="item.option.refName"
        v-model="item.value"
        :readonly="item.option.readonly"
        :disabled="item.option.disabled"
        :editable="item.option.editable"
        :clearable="item.option.clearable"
        :size="item.option.size"
        :start-placeholder="item.option.startPlaceholder"
        :end-placeholder="item.option.endPlaceholder"
        :format="item.option.format"
        :align="item.option.align"
        :type="item.option.type"
        :popper-class="item.option.popperClass"
        :picker-options="item.option.pickerOptions"
        :range-separator="item.option.rangeSeparator"
        :default-value="item.option.defaultValue"
        :default-time="item.option.defaultTime"
        :value-format="item.option.valueFormat"
        :name="item.option.name"
        :unlink-panels="item.option.unlinkPanels"
        :prefix-icon="item.option.prefixIcon"
        :clear-icon="item.option.clearIcon"
        :validate-event="item.option.validateEvent"
        :placeholder="item.option.placeholder"
        @change="(value) => {if (typeof item.event.change == 'function') item.event.change(value)}"
        @blur="() => {if (typeof item.event.blur == 'function') item.event.blur()}"
        @focus="() => {if (typeof item.event.focus == 'function') item.event.focus()}"
      />
      <el-time-picker
        v-if="item.type=='time'"
        :ref="item.option.refName"
        v-model="item.value"
        :readonly="item.option.readonly"
        :disabled="item.option.disabled"
        :editable="item.option.editable"
        :clearable="item.option.clearable"
        :size="item.option.size"
        :placeholder="item.option.placeholder"
        :start-placeholder="item.option.startPlaceholder"
        :end-placeholder="item.option.endPlaceholder"
        :is-range="item.option.isRange"
        :arrow-control="item.option.arrowControl"
        :align="item.option.align"
        :popper-class="item.option.popperClass"
        :picker-options="item.option.pickerOptions"
        :range-separator="item.option.rangeSeparator"
        :value-format="item.option.valueFormat"
        :default-value="item.option.defaultValue"
        :name="item.option.name"
        :prefix-icon="item.option.prefixIcon"
        :clear-icon="item.option.clearIcon"
        @change="(value) => {if (typeof item.event.change == 'function') item.event.change(value)}"
        @blur="() => {if (typeof item.event.blur == 'function') item.event.blur()}"
        @focus="() => {if (typeof item.event.focus == 'function') item.event.focus()}"
      />
      <slot
        v-if="item.type=='slot'"
        :data="item"
      />
    </el-form-item>
    <slot name="end" />
  </div>
</template>
<script>
export default {
  name: 'FromItem',
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    auto: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      innerData: { },
      initSlotOption: {
        value: null,
        label: null,
        option: {
          type: 'slot',
          refName: null,
          show: true
        }
      },
      initInputOption: {
        value: null,
        label: null,
        rules: null,
        option: {
          type: 'text',
          refName: null,
          show: true,
          maxlength: null,
          minlength: null,
          showWordLimit: false,
          placeholder: this.$t('common.enter'),
          clearable: true,
          showPassword: false,
          disabled: false,
          size: 'small',
          prefixIcon: null,
          suffixIcon: null,
          rows: 2,
          autosize: false,
          autocomplete: 'off',
          autoComplete: 'off',
          name: null,
          readonly: false,
          max: null,
          min: null,
          resize: null,
          autofocus: false,
          form: null,
          label: null,
          tabindex: null,
          validateEvent: true
        },
        event: {
          blur: null,
          focus: null,
          change: null,
          input: null,
          clear: null
        }
      },
      initSelectOption: {
        value: null,
        label: null,
        rules: null,
        option: {
          refName: null,
          show: true,
          slotName: null,
          multiple: false,
          disabled: false,
          valueKey: 'value',
          size: 'small',
          clearable: true,
          collapseTags: false,
          multipleLimit: 0,
          name: null,
          selectOptions: [],
          autocomplete: 'off',
          autoComplete: 'off',
          placeholder: this.$t('common.select'),
          filterable: false,
          allowCreate: false,
          filterMethod: null,
          remote: false,
          remoteMethod: null,
          loading: false,
          loadingText: this.$t('common.loading'),
          noMatchText: this.$t('common.noMatchText'),
          noDataText: this.$t('common.emptyText'),
          popperClass: null,
          reserveKeyword: false,
          defaultFirstOption: false,
          popperAppendToBody: true,
          automaticDropdown: true
        },
        selectOption: {
          disabled: false
        },
        event: {
          change: null,
          visibleChange: null,
          removeTag: null,
          clear: null,
          blur: null,
          focus: null
        }
      },
      initDatePickerOption: {
        value: null,
        label: null,
        rules: null,
        option: {
          refName: null,
          show: true,
          readonly: false,
          disabled: false,
          editable: true,
          clearable: true,
          size: 'small',
          placeholder: this.$t('common.select'),
          startPlaceholder: null,
          endPlaceholder: null,
          type: 'date',
          format: 'yyyy-MM-dd',
          align: 'left',
          popperClass: null,
          pickerOptions: {},
          rangeSeparator: '-',
          defaultValue: null,
          defaultTime: null,
          valueFormat: null,
          name: null,
          unlinkPanels: false,
          prefixIcon: 'el-icon-date',
          clearIcon: 'el-icon-circle-close',
          validateEvent: true
        },
        event: {
          change: null,
          blur: null,
          focus: null
        }
      },
      initTimeePickerOption: {
        value: null,
        label: null,
        rules: null,
        option: {
          refName: null,
          show: true,
          readonly: false,
          disabled: false,
          editable: true,
          clearable: true,
          size: 'small',
          placeholder: this.$t('common.select'),
          startPlaceholder: null,
          endPlaceholder: null,
          isRange: false,
          arrowControl: false,
          align: 'left',
          popperClass: null,
          pickerOptions: {},
          rangeSeparator: null,
          valueFormat: null,
          defaultValue: null,
          name: null,
          prefixIcon: 'el-icon-time',
          clearIcon: 'el-icon-circle-close'
        },
        event: {
          change: null,
          blur: null,
          focus: null
        }
      }
    }
  },
  watch: {
    formData: {
      handle(val) {
        const that = this
        const innerData = {}
        Object.keys(this.formData).forEach((key, index, array) => {
          // eslint-disable-next-line eqeqeq
          const item = that.formData[key]
          // eslint-disable-next-line eqeqeq
          if (item.constructor != Object) {
            return
          }
          innerData[key] = {}
          let newItem = innerData[key]
          newItem.value = item.value
          newItem.defaultValue = item.value
          newItem.label = item.label
          newItem.type = item.type
          newItem.rules = item.rules
          if (item.type === 'slot') {
            newItem = item
            newItem.option = Object.assign({}, that.initSlotOption.option, item.option)
            if (!newItem.option.refName)newItem.option.refName = key
            newItem.slotName = item.slotName
            return
          }
          if (item.type === 'input') {
            newItem.option = Object.assign({}, that.initInputOption.option, item.option)
            newItem.event = Object.assign({}, that.initInputOption.event, item.event)
          }
          if (item.type === 'select') {
            newItem.option = Object.assign({}, that.initSelectOption.option, item.option)
            newItem.event = Object.assign({}, that.initSelectOption.event, item.event)
            if (item.option.multiple === true && item.option.selectOptions) {
              item.option.selectOptions.unshift({ label: this.$t('common.all'), value: 'all' })
            }
          }
          if (item.type === 'date') {
            newItem.option = Object.assign({}, that.initDatePickerOption.option, item.option)
            newItem.event = Object.assign({}, that.initDatePickerOption.event, item.event)
          }
          if (item.type === 'time') {
            newItem.option = Object.assign({}, that.initTimeePickerOption.option, item.option)
            newItem.event = Object.assign({}, that.initTimeePickerOption.event, item.event)
          }
          if (!newItem.option.refName)newItem.option.refName = key
        })
        this.innerData = innerData
      },
      deep: true
    }
  },
  created() {
    const that = this
    const innerData = {}
    Object.keys(this.formData).forEach((key, index, array) => {
      // eslint-disable-next-line eqeqeq
      const item = that.formData[key]
      // eslint-disable-next-line eqeqeq
      if (item.constructor != Object) {
        return
      }
      innerData[key] = {}
      const newItem = innerData[key]
      newItem.value = item.value
      newItem.defaultValue = item.value
      newItem.label = item.label
      newItem.type = item.type
      if (item.type === 'slot') {
        newItem.option = Object.assign({}, that.initSlotOption.option, item.option)
        if (!newItem.option.refName)newItem.option.refName = key
        newItem.slotName = item.slotName
        return
      }
      if (item.type === 'input') {
        newItem.option = Object.assign({}, that.initInputOption.option, item.option)
        newItem.event = Object.assign({}, that.initInputOption.event, item.event)
      }
      if (item.type === 'select') {
        newItem.option = Object.assign({}, that.initSelectOption.option, item.option)
        newItem.event = Object.assign({}, that.initSelectOption.event, item.event)
      }
      if (item.type === 'date') {
        newItem.option = Object.assign({}, that.initDatePickerOption.option, item.option)
        newItem.event = Object.assign({}, that.initDatePickerOption.event, item.event)
      }
      if (item.type === 'time') {
        newItem.option = Object.assign({}, that.initTimeePickerOption.option, item.option)
        newItem.event = Object.assign({}, that.initTimeePickerOption.event, item.event)
      }
      if (!newItem.option.refName)newItem.option.refName = key
    })
    this.innerData = innerData
  },
  methods: {
    // 查询
    getAllParams() {
      const params = {}
      for (const key in this.innerData) {
        const val = this.innerData[key]
        // eslint-disable-next-line eqeqeq
        if (val.value) {
          params[key] = val.value
        }
      }
      return params
    },
    focus(name) {
      this.$refs[name].focus()
    },
    blur(name) {
      this.$refs[name].focus()
    },
    select(name) {
      this.$refs[name].focus()
    },
    resetAllField() {
      const that = this
      Object.keys(this.innerData).forEach((key, index, array) => {
        that.innerData[key].value = that.innerData[key].defaultValue
      })
    }
  }
}
</script>

<style scoped>

</style>
